前端設計理念

在「猜數字遊戲」專案中，前端介面設計扮演極為重要的角色。目標是讓玩家在操作時能夠直覺、流暢地互動，並即時收到遊戲回饋。因此，我在設計畫面時考量了三個核心元素：清晰的版面結構、視覺引導效果以及即時互動回饋。這樣可以降低玩家操作的學習成本，也提升整體遊戲的趣味性。

畫面結構設計

遊戲前端主要分成三個畫面：
規則說明畫面：
顯示遊戲目標、操作方式與各難度規則。
透過文字與圖示（如顏色標示不同難度）清楚呈現資訊。
設置「開始遊戲」按鈕，引導玩家進入難度選擇。
難度選擇畫面：
提供簡單、適中與困難三種按鈕選項，並顯示歷史成績統計。
使用背景顏色區分難度，增強視覺提示，讓玩家快速辨識。
遊戲互動畫面：
包含倒數計時器、猜測輸入欄、送出按鈕、結果提示、歷史紀錄區與再玩一次按鈕。
透過版面配置與文字提示，讓玩家在操作上不會迷失方向。
這種分畫面設計確保了遊戲流程清晰，也方便未來增加新功能或互動效果。

互動效果實作

在互動方面，我運用了 JavaScript 事件監聽與 DOM 操作來控制遊戲流程：
按鈕事件監聽：使用 onclick 或 addEventListener('click', ...)，偵測玩家按鈕操作，如「開始遊戲」、「送出」、「再玩一次」。
鍵盤事件監聽：監聽 Enter 鍵輸入，讓玩家可以直接按下 Enter 提交猜測，提高操作便利性。
即時提示更新：每次猜測後，程式即時判斷答案大小，並更新結果提示文字。如果玩家選擇簡單模式，還會更新提示範圍。
歷史紀錄呈現：在簡單與適中模式下，每次猜測結果會立即加入歷史紀錄區，使用 innerText 並換行顯示每次猜測，方便玩家檢視。
這些互動設計不僅提升遊戲可玩性，也讓玩家能立即看到操作結果，增加參與感。
視覺效果與玩家回饋
除了基本文字提示外，我還加入了視覺回饋效果來增強遊戲體驗：
彩帶動畫（Confetti）：當玩家猜中答案時，透過 canvas-confetti 噴出彩帶，提供成就感的視覺回饋。
背景色變換：根據不同難度切換背景顏色，簡單模式為綠色系，適中模式為黃色系，困難模式為紅色系，讓玩家在心理上能即時感受挑戰強度。
倒數計時視覺提醒：剩餘秒數會即時更新，當時間逼近結束時，玩家會有緊迫感，提升遊戲互動張力。
這些視覺與互動設計讓遊戲不只是數字猜測，更是一種有節奏、有情境的互動體驗。
表單與輸入欄設計
為了讓使用者輸入更方便，我設計了輸入欄：
數字型別限制：使用<input type="number">限制玩家只能輸入數字。
範圍檢查：輸入的數字若超過當前難度範圍，系統會跳出提示，提醒玩家輸入合法數字。
自動清空與焦點控制：每次猜測後，輸入欄會自動清空並將焦點返回到輸入欄，提高操作效率，讓玩家能快速進行下一次猜測。

前端程式模組化與維護性

在程式結構上，我將前端功能拆成多個函式：
startGame(level)：初始化遊戲狀態與倒數計時器，設定難度與提示選項。
makeGuess()：處理猜測邏輯，更新提示文字與歷史紀錄。
endGame(timeUp)：遊戲結束處理，顯示最終結果並控制按鈕狀態。
restartGame()：重置畫面與變數，返回難度選擇。
saveRecord() 與 showStats()：管理玩家歷史紀錄與統計數據。
這種模組化設計讓前端程式易於維護，也方便將來加入新互動效果或改版 UI。

介面與互動效果心得

透過這次練習，我深刻體會到前端介面與互動設計的重要性。僅有遊戲邏輯而缺乏清楚的畫面與互動提示，玩家可能無法順暢完成遊戲。透過色彩、動畫、即時文字更新與歷史紀錄呈現，玩家能在操作中獲得即時回饋與樂趣。此外，前端的模組化設計也讓程式易於擴充，未來可以加入排行榜、更多互動動畫或多種遊戲模式。